<html xmlns:th="http://www.thymeleaf.org">
<div class="card">
    <div class="card-header">
        <div class="col-xs-6">
            <h2>API执行客户端</h2>
        </div>
    </div>
    <form id="api_form" class="form-horizontal">
        <div class="card-body card-padding">
            <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">接口环境</label>
                <div class="col-sm-10">
                    <div class="select">
                        <select class="form-control" name="host" id="host">
                            <option value="">请选择</option>
                            <option value="http://localhost:8080">本地环境</option>
                            <option value="http://idc02-test-passport-vip00:6010">开发环境</option>
                            <option value="http://idc02-daily-passport-vip00:4010">测试环境</option>
                            <option value="http://idc02-pre-passport-vip00:5010">预发环境</option>
                            <option value="http://idc01-im-passport-vip00:2120">线上环境</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">接口分类</label>
                <div class="col-sm-10">
                    <div class="select">
                        <select class="form-control" name="interfaceCategory" id="categoryId">
                            <option value="">请选择</option>
                            <option th:each="category:${categoryList}" th:value="${category.interfaceCategoryId}" th:text="${category.categoryName}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">接口</label>
                <div class="col-sm-10">
                    <div class="select">
                        <select class="form-control" name="interfaceId" id="interfaceId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">接口地址</label>
                <div class="col-sm-10">
                    <input type="text" readonly="readonly" name="interfaceUrl" class="form-control input-sm" id="interfaceUrl" placeholder="接口地址"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">接口参数JSON样例</label>
                <div class="col-sm-10">
                    <textarea class="form-control" readonly="readonly" id="interfaceDesc" name="interfaceDesc" rows="3" placeholder="接口参数JSON"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">接口参数</label>
                <div class="col-sm-10">
                    <div id="postInterfaceParam">
                    </div>
                    <input type="hidden" class="form-control" readonly="readonly" name="requestParamJson" id="requestParamJson"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">接口请求地址</label>
                <div class="col-sm-10">
                    <textarea class="form-control" readonly="readonly" id="request_url" name="requestUrl" rows="3" placeholder="接口请求地址"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">接口请求参数</label>
                <div class="col-sm-10">
                    <textarea class="form-control" readonly="readonly" id="request_param" name="requestParam" rows="3" placeholder="接口请求参数"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <button type="button" class="btn btn-info" id="create_request_url">
                    生成请求地址
                </button>
                <button type="button" class="btn btn-primary" id="send_api_request">
                    发送请求
                </button>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">接口响应结果</label>
                <div class="col-sm-10">
                    <textarea class="form-control" readonly="readonly" id="responseText" name="responseText" rows="10"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
</html>
<script>
    /*<![CDATA[*/
    $(function () {
        $("#categoryId").on("change",function(){
            var url = "/api/queryInterfaceByCategoryId?categoryId="+$(this).val();
            $.get(url,function(data){
                if(!data.ok){
                    alert(data.reason);
                    return false;
                }
                var html = '<option value="">请选择</option>';
                $.each(data.result,function (index,element) {
                    html += '<option value="'+element.interfaceId+'">';
                    html += element.interfaceName;
                    html += "</option>"
                })
                $("#interfaceId").html(html);
            })
        })

        
        $("#interfaceId").on("change",function () {
            var url = "/api/queryInterfaceById?interfaceId="+$(this).val();
            $.get(url,function(data){
              $("#interfaceUrl").val(data.result.interfaceUrl);
              $("#interfaceDesc").val(data.result.interfaceDesc);
              if(data.result.interfaceParam != ''){
                  var html = '';
                  $.each(JSON.parse(data.result.interfaceParam), function (i, n) {
                      html+='<label class="inline postInterfaceParam col-sm-10" style="padding-left: 0px;">';
                      html+='<div class="col-sm-2" style="padding-left: 0px;"><input name="paramName" readonly="readonly" class="form-control" value="'+n.paramName+'"  placeholder="参数名称"/></div>';
                      html+='<div class="col-sm-10" style="padding-left: 0px;"><input name="paramValue" class="form-control" placeholder="'+n.paramDesc+'"/></div>';
                      html+='</label>';
                  })
                  $("#postInterfaceParam").append(html);
              }
            })
        })

        $('#api_form').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                host: {
                    validators: {
                        notEmpty: {
                            message: '请选择接口环境'
                        }
                    }
                },
                interfaceCategory: {
                    validators: {
                        notEmpty: {
                            message: '请选择接口分类'
                        }
                    }
                },
                interfaceId: {
                    validators: {
                        notEmpty: {
                            message: '请选择请求接口'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            var host = $("#host").val();
            var interfaceId = $("#interfaceId").val();
            var requestParamJson = $("#requestParamJson").val();
            var postData = {
                host: host,
                interfaceId: interfaceId,
                requestParamJson: requestParamJson
            }
            $.post("/api/createApiRequestUrl",postData,function(data){
                if(!data.ok){
                    alert(data.reason);
                    return false;
                }
                $("#request_url").val(data.result.requestUrl);
                $("#request_param").val(data.result.paramString);
            })
        });

        $("#create_request_url").on("click",function(){
            convertToJsonAndSubmit();
        })


        $("#send_api_request").on("click",function(){
            convertToJsonAndSubmit();
            if($("#request_param").val() == ''){
                alert("请输入接口参数");
                return false;
            }
            var data = {
                requestUrl : $("#request_url").val(),
                requestParam : $("#request_param").val()
            }
            $.post("/api/sendRequest",data,function(data){
                if(!data.ok){
                    alert(data.reason);
                    return false;
                }
                $("#responseText").text(data.result);
            });
        })
    })
    function convertToJsonAndSubmit(){
        var superDivParam=$("label[class^='inline postInterfaceParam'] div[class^='col-sm-'] input[name='paramName']");
        var array=new Array();
        var paramObject={
            paramName:"",
            paramValue:""
        }
        $.each(superDivParam, function(i, superParam) {
            var name=$(superParam).val();
            var type=$(superParam).parent().next().children().val();
            if(name != '' && type != ''){
                paramObject=new Object();
                paramObject.paramName=name;
                paramObject.paramValue=type;
                array.push(paramObject);
            }
        });
        $("#requestParamJson").val(JSON.stringify(array));
        $("#api_form").submit();
    }
    /*]]>*/
</script>